<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
			<el-form-item label="分机号" prop="extn">
				<el-input v-model="queryParams.extn" placeholder="请输入分机号" clearable @keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
			</el-form-item>

		</el-form>
		<el-table v-loading="loading" :data="list" style="width: 100%;">
			<el-table-column label="序号" type="index" align="center">
				<template slot-scope="scope">
					<span>{{scope.$index + 1}}</span>
				</template>
			</el-table-column>
			<el-table-column label="主题" align="center" prop="topic" :show-overflow-tooltip="true" />
			<el-table-column label="会议号" align="center" prop="nbr" :show-overflow-tooltip="true" />
			<el-table-column label="描述" align="center" prop="description" :show-overflow-tooltip="true" />
			<el-table-column label="开始时间" align="center" prop="created_at" :show-overflow-tooltip="true" />
			<el-table-column label="会议当前人数" align="center" prop="membercount" :show-overflow-tooltip="true" />
			<el-table-column label="呼出组" align="center" prop="context" :show-overflow-tooltip="true" />
			<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
				<template slot-scope="scope" >
					<el-button v-if="scope.row.completed_at != null && scope.row.recording == true" type="text" icon="el-icon-microphone" size="mini" @click="playaudio(scope.row)">播放录音</el-button>
					<el-button v-if="scope.row.completed_at != null" type="text" icon="el-icon-edit" size="mini" @click="viewperson(scope.row)">查看会议成员</el-button>
					<el-button v-if="scope.row.completed_at == null" type="text" icon="el-icon-edit" size="mini" @click="closemeeting(scope.row)">取消会议</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 添加或修改参数配置对话框 -->
		<el-dialog title="修改" :visible.sync="open" width="600px" append-to-body>
			<el-form ref="form" :model="form" label-width="100px">
				<el-form-item label="分机号" prop="nbr">
					<el-input v-model="form.nbr" placeholder="请输入分机号" disabled/>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input v-model="form.password" placeholder="请输入密码" />
				</el-form-item>
				<el-form-item label="转接号码" prop="transfer_phone">
					<el-input v-model="form.transfer_phone" placeholder="请输入转接号码" />
				</el-form-item>
				<el-form-item label="鉴权用户名" prop="name">
					<el-input v-model="form.name" placeholder="请输入鉴权用户名" />
				</el-form-item>
				<el-form-item label="是否自动示闲" prop="if_auto_ready">
					<el-switch v-model="form.if_auto_ready" active-value="true" inactive-value="false" active-color="#4a89dc" inactive-color="#b5b9bd">
					</el-switch>
				</el-form-item>
				<el-form-item label="是否自动上报" prop="if_auto_login">
					<el-switch v-model="form.if_auto_login" active-value="true" inactive-value="false" active-color="#4a89dc" inactive-color="#b5b9bd">
					</el-switch>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
		<el-dialog
		  title="播放录音"
		  :visible.sync="dialogVisible"
		  width="30%" style="margin-top: 200px;">
		  <audio :src="audiourl" controls="controls" style="width: 100%;">
                  您的浏览器不支持 audio 标签。
     </audio>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false">取 消</el-button>
		  </span>
		</el-dialog>
		<el-dialog
		  title="会议人员"
		  :visible.sync="dialogperson"
		  width="40%" style="margin-top: 200px;">
		  <el-row style="">
				<el-col :span="6" v-for="(item, index) in personlist" :key="item.RESCUE_ID" style="margin-left: 47px;margin-top: 20px;">
					<el-card :body-style="{ padding: '0px' }">
						<div style="padding: 14px;">
							<span style="color: #409EFF;">{{ item.DESCRIBE }}</span>
							<div class="bottom clearfix" style="margin-top: 5px;">
								<time class="time">{{ item.TELEPHONE }}</time>
							</div>
						</div>
					</el-card>
				</el-col>
			</el-row>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false">取 消</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
	import { conferenceDetail,closeConferences,createConferences,getConferencesMember,joinConferences,oprConferences } from "@/api/call/meetinglist";

	import { getIppbxConfig } from "@/api/call/ippbxServer";
	export default {
		name: "Online",
		data() {
			return {
				// 遮罩层
				loading: true,
				// 总条数
				total: 0,
				// 表格数据
				list: [],
				pageNum: 1,
				pageSize: 10,
				// 表单参数
				form: {},
				// 查询参数
				queryParams: {
					extn: undefined,
				},
				open: false,
	      dialogVisible: false,
	      audiourl: '',
	      dialogperson: false,
	      personlist: [],
			};
		},
		created() {
			this.getList();
		},
		methods: {
			/** 查询登录日志列表 */
			getList() {
				this.loading = true;
				conferenceDetail(this.queryParams).then(response => {
					this.list = response.data;
					this.loading = false;
				});
			},
			submitForm() {
				this.loading = true;
				this.form.context = 'out';
				this.form.extn = this.form.nbr;
				this.form.extnPwd = this.form.password;
				editExten(this.form).then(response => {
					this.list = response.data;
					this.loading = false;
					this.open = false;
					this.getList();
				});
			},
			viewperson(row){
	  		getConferencesMember({uuid: row.uuid}).then(response=>{
	        this.personlist = response.data;
	  		});	  		
	  	},
	  	playaudio(row){
	  		this.dialogVisible = true;
	  		getIppbxConfig().then(response=>{
	        this.audiourl = row.record_url.replace('/soft/ocean/ocean/www', 'http://' + response.data.ip + ':' + response.data.port)
	  		});
	  		
	  	},
			/** 修改按钮操作 */
			closemeeting(row) {
				console.log(row)
				this.$confirm('确认取消会议吗?', "警告", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}).then(function() {
					return closeConferences({uuid: row.uuid});
				}).then(() => {
					const that = this;
					setTimeout(function(){
						that.getList();
					},1000)					
					this.msgSuccess("取消成功");
				})
			},
			// 取消按钮
			cancel() {
				this.open = false;
				this.reset();
			},
			// 表单重置
			reset() {
				this.form = {
					extn: undefined,
					nbr: undefined,
					password: undefined,
					extnPwd: undefined,
					if_auto_ready: undefined,
					if_auto_login: undefined,
					name: undefined,
					transfer_phone: undefined,
				};
				this.resetForm("form");
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.offset = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.resetForm("queryForm");
				this.handleQuery();
			},
			/** 强退按钮操作 */
			handleForceLogout(row) {
				this.$confirm('是否确认强退名称为"' + row.userName + '"的数据项?', "警告", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}).then(function() {
					return forceLogout(row.tokenId);
				}).then(() => {
					this.getList();
					this.msgSuccess("强退成功");
				})
			}
		}
	};
</script>